<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
$(function() {
	$("#t_day").datepicker();
	
	$.ajax({
		type: "post",
		url: "./userRegReport_all.ga",
		dataType: "html",
		success: function(data) {
			$("#allUsersTab_result").html( data );
			$("#allCount").html( $("#allUserCount").html() );
		},
		error: function() {
			alert( "오류" );
		}
	});
});

function tabClick( id ) {
	$(".tabButton").css("background", "#999999");
	$("#"+id).css("background", "#333333");
	
	$(".tabWindows").css("display", "none");
	$("#"+id+"_window").css("display", "block");
	
	$(".tabResults").css("display", "none");
	$("#"+id+"_result").css("display", "block");
}

function monthSearchBtn() {
	$.ajax({
		type: "post",
		url: "./userRegReport_month.ga",
		data: {
			year: $("#yearSelecter").val(),
			month: $("#monthSelecter").val()
		},
		dataType: "html",
		success: function(data) {
			$("#monthUsersTab_result").html( data );
			if ( $("#monthUserCount").html() == "" ) {
				$("#monthUsersTab_result").html( "" );
				alert( "검색 결과가 없습니다.");
			}
			$("#month").html( $("#monthSelecter").val() );
			$("#monthAllCount").html( $("#monthUserCount").html() );
		},
		error: function() {
			alert("오류");
		}
	});
}

function daySearchBtn() {
	$.ajax({
		type: "post",
		url: "./userRegReport_day.ga",
		data: { day: $("#t_day").val() },
		dataType: "html",
		success: function( data ) {
			$("#dayUsersTab_result").html( data );
			if( $("#dayUserCount").html() == "" ) {
				$("#dayUsersTab_result").html( "" );
				alert( "검색 결과가 없습니다." );
			}
			$("#day").html( $("#t_day").val() );
			$("#dayAllCount").html( $("#dayUserCount").html() );
		},
		error: function() {
			alert("오류");
		}
	});
}

</script>

</head>
<body>

<%
Date date = new Date();
int nowYear = date.getYear( ) + 1900;
int minYear = 2013;
%>

<h2>회원 현황</h2>
<table align="right">
    <tr>
        <td><input type="button" value="엑셀저장"/></td>
        <td><input type="button" value="인쇄하기"/></td>
    </tr>
</table>
<br/><br/><br/>

<div class="tabButton" id="allUsersTab" style="background:#333333;" onclick="tabClick(this.id)">누적 가입자</div>
<div class="tabButton" id="monthUsersTab" style="background:#999999;" onclick="tabClick(this.id)">월별 가입자</div>
<div class="tabButton" id="dayUsersTab" style="background:#999999;" onclick="tabClick(this.id)">일별 가입자</div>

<div class="tabWindows" id="allUsersTab_window" style="clear:both;background:#eeeeee;line-height:70px;">
    &nbsp;&nbsp;
    <span style="font-size:15pt;color:#444444;font-weight: bold;">누적 가입자 수 : <span id="allCount"></span> 명</span>
</div>

<div class="tabWindows" id="monthUsersTab_window" style="clear:both;background:#eeeeee;line-height:70px;display:none;">
    <table width="100%">
        <tr>
            <td>
                &nbsp;&nbsp; 월별 검색 &nbsp;
                <select id="yearSelecter">
                    <%
                    for ( int i = minYear; i <= nowYear; i++ ) {
                    	if ( i == nowYear ) {
                    		%>
                    		<option value="<%= i %>" selected><%= i %></option>
                    		<%
                    	} else {
                    	    %>
                    	    <option value="<%= i %>"><%= i %></option>
                    	    <%
                        }
                    }
                    %>
                </select> 년 &nbsp;&nbsp;
                
                <select id="monthSelecter">
                    <%
                    for ( int i = 1; i <= 12; i++ ) {
                    	if ( i == date.getMonth( ) + 1 ) {
                    		%>
                    		<option value="<%= i %>" selected><%= i %></option>
                    		<%
                    	} else {
                    		%>
                    		<option value="<%= i %>"><%= i %></option>
                    		<%
                    	}
                    }
                    %>
                </select> 월 &nbsp;&nbsp;
                <input type="button" value="검색" onclick="monthSearchBtn()" style="width:80px;height:26px;"/>
            </td>
            <td align="right">
                <span 
                   id="allCount"
                   style="font-size:15pt;color:#444444;font-weight: bold;"
                >
                   <span id="month"></span>월 가입자 수 : <span id="monthAllCount"></span> &nbsp;&nbsp;
                </span>
            </td>
        </tr>
    </table>
    
</div>

<div class="tabWindows" id="dayUsersTab_window" style="clear:both;background:#eeeeee;line-height:70px;display:none;">
    <table width="100%">
        <tr>
            <td>
                &nbsp;&nbsp; 일별 검색 &nbsp;
                <input type="text" id="t_day" readonly/> &nbsp;&nbsp;
                <input type="button" value="검색" onclick="daySearchBtn()" style="width:80px;height:26px;"/>
            </td>
            <td align="right">
                <span id="allCount" style="font-size:15pt;color:#444444;font-weight: bold;">
                    <span id="day"></span>일 가입자 수 : <span id="dayAllCount"></span> &nbsp;&nbsp; 
                </span>
            </td>
        </tr>
    </table>
</div>
<br/>


<div class="tabResults" id="allUsersTab_result"></div>
<div class="tabResults" id="monthUsersTab_result" style="display:none;"></div>
<div class="tabResults" id="dayUsersTab_result" style="display:none;"></div>

</body>
</html>